<!-- <template>
    <div style="width: 100%; height: 100%; padding: 10px;">
        <a-date-picker />
        <a-range-picker />
        <a-tooltip title="search">
            <a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
        </a-tooltip>
    </div>
</template>
<script setup>
import { h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
</script> -->


<template>
    <a-table :columns="columns" :data-source="data" :pagination="false" size="small" :row-class-name="getStripeClass">
        <!-- 该方式已被废弃（和下面的slots配合使用）
        <template #wea_img="{ text }">
            <img :src="'https://widget.tianqiapi.com/static/skin/apple/' + text + '.png'" alt="天气图标"
                style="width: 40px; height: 40px;" />
        </template>
-->
        <template #title>
            <div style="text-align: center; font-size: 18px;">{{ cityNameAddWeekName == null ? '请点击左下角的星期' :
                cityNameAddWeekName }}</div>
        </template>
        <template #bodyCell="{ text, record, column }">
            <span v-if="column.dataIndex === 'wea_img'">
                <img :src='`https://widget.tianqiapi.com/static/skin/apple/${text}.png`' alt="天气图标"
                    style="width: 40px; height: 40px;" />
            </span>
        </template>
    </a-table>
</template>

<script setup>
import { watch, ref } from 'vue';
// 接受模块的参数
const props = defineProps({
    hoursWeekData: {
        type: Array,
        required: true
    },
    cityNameAddWeekName: {
        type: String
    }
})

// 斑马纹
const getStripeClass = (_record, index) => index % 2 ? 'stripe-row' : ''

//接听父模块参数是否变化（deep：开启深度监听）
watch(() => props.hoursWeekData, (newVal) => {
    const newArr = newVal.map((item, index) => ({ ...item, key: index + 1 }));
    data.value = newArr
}, { deep: true })

const columns = [
    { title: '时间', dataIndex: 'hours' },
    { title: '温度', dataIndex: 'tem' },
    { title: '风向', dataIndex: 'win' },
    { title: '风力', dataIndex: 'win_speed' },
    { title: '天气', dataIndex: 'wea' },
    // { title: '图标', dataIndex: 'wea_img', slots: { customRender: 'wea_img' } }
    { title: '图标', dataIndex: 'wea_img' }
];
const data = ref([])

</script>


<!-- <style scoped>
:deep(.ant-table-tbody tr:nth-child(even)) {
    background-color: #fafafa;
}
</style> -->
<style scoped>
:deep(.stripe-row) td {
    background-color: #fafafa;
}

[data-doc-theme='dark'] :deep(.stripe-row) td {
    background-color: #1d1d1d;
}
</style>